<template>
  <router-link
    class="list-card"
    :to="{
      name: 'Card',
      params: { listId: data.boardListId, cardId: data.id },
    }"
  >
    <div
      class="list-card-cover"
      :style="`background-image: url(${coverUrl()})`"
    ></div>
    <div class="list-card-title">{{ data.name }}</div>
    <div class="list-card-badges">
      <div class="badge" v-if="data.description">
        <span class="icon icon-description"></span>
      </div>
      <div class="badge" v-if="data.commentCount > 0">
        <span class="icon icon-comment"></span>
        <span class="text">{{ data.commentCount }}</span>
      </div>
      <div
        class="badge"
        v-if="Array.isArray(data.attachments) && data.attachments.length > 0"
      >
        <span class="icon icon-attachment"></span>
        <span class="text">{{ data.attachments.length }}</span>
      </div>
    </div>
  </router-link>
</template>

<script>
export default {
  name: "Card",

  computed: {
    staticServer() {
      return this.$store.state.staticServer;
    },
  },

  methods: {
    coverUrl() {
      if (this.data.attachments) {
        let cover = this.data.attachments.find((item) => item.isCover === true);
        if (cover) {
          return this.staticServer + cover.path;
        } else {
          return "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2256548675,3955195085&fm=26&gp=0.jpg";
        }
      } else {
        return "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2256548675,3955195085&fm=26&gp=0.jpg";
      }
    },
  },

  props: {
    data: {
      type: Object,
    },
  },
};
</script>

<style>
</style>